<template>
  <div class="logisticList">
    <div class="logisticWrap">
      <div class="logItem">
        <h2>
          <span>圆通快递</span>
        </h2>
        <ul class="price">
          <li>
            <strong>地区 / 重量</strong>
            <strong>0.5KG</strong>
            <strong>0.5-1KG</strong>
            <strong>续重(1KG以上)</strong>
          </li>
          <li>
            <strong>普通地区</strong>
            <span>{{ logisticList.firstPrice }} 元 / 单</span>
            <span>{{ logisticList.middlePrice }} 元 / 单</span>
            <span>{{ logisticList.endPrice }} 元 / KG</span>
          </li>
          <li>
            <strong>偏远地区</strong>
            <span>{{ logisticList.farFirstPrice }} 元 / 单</span>
            <span>{{ logisticList.farMidllePrice }} 元 / 单</span>
            <span>{{ logisticList.farEndPrice }} 元 / KG</span>
          </li>
          <!-- <li>
            <span>{{ logisticList.firstPrice }}元</span>
            <p>普通地区0.5kg</p>
          </li>
          <li>
            <span>{{ logisticList.middlePrice }}元</span>
            <p>普通地区0.5-1kg</p>
          </li>
          <li>
            <span>{{ logisticList.endPrice }}元</span>
            <p>普通地区续重</p>
          </li>
          <li>
            <span>{{ logisticList.farFirstPrice }}元</span>
            <p>偏远地区0.5kg</p>
          </li>
          <li>
            <span>{{ logisticList.farMidllePrice }}元</span>
            <p>偏远地区0.5-1kg</p>
          </li>
          <li>
            <span>{{ logisticList.farEndPrice }}元</span>
            <p>偏远地区续重</p>
          </li> -->
        </ul>
        <p>* 此物流费用包含
          <em>快递费 + 人工操作费0.15 + 场地租金0.1 + 快递外包装0.1</em>
        </p>
        <p>* 偏远地区：陕西 甘肃 宁夏 新疆 西藏 内蒙</p>
      </div>
      <div class="footer">
        <b class="button-n" @click="close">确认</b>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
export default {
  name: 'logisticList',
  props: {
    logisticShow: {
      type: Boolean
    }
  },
  data () {
    return {
      show: true
    }
  },
  computed: {
    ...mapGetters([
      'logisticList'
    ])
  },
  methods: {
    close () {
      this.$emit('close')
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.logisticList
  position fixed
  z-index 12
  top 0
  left 0
  width 100%
  height 100%
  background rgba(0, 0, 0, 0.6)
  .logisticWrap
    position absolute
    top 20vh
    left 0
    right 0
    width 800px
    margin 0 auto
    padding 30px 40px
    border-radius 4px
    background #ffffff
    .logItem
      margin-bottom 40px
      h2
        font-size 16px
        color #303133
        line-height 22px
        // display flex
        // justify-content space-between
        margin-bottom 10px
      .price
        // display flex
        border 1px solid #979797
        border-radius 4px
        li
          // flex 1
          display flex
          justify-content space-between
          border-bottom 1px solid #979797
          // border-right 1px solid #979797
          font-size 16px
          color #303133
          line-height 22px
          padding 14px
          text-align center
          // &:last-child
          // border none
          span
            flex 1
          strong
            flex 1
            font-weight bold
          >p
            font-size 14px
      >p
        font-size 16px
        margin-top 20px
        em
          color #ff3341
      .unUse
        position relative
        opacity 0.6
        &:before
          content ''
          position absolute
          top 0
          left 0
          width 100%
          height 100%
          cursor not-allowed
    .footer
      text-align center
      margin-top 36px
</style>
